<template>
  <div class="reco_box">
    <!-- 轮播 -->
    <van-swipe class="test" :autoplay="3000">
      <van-swipe-item
        style="height: 100%"
        v-for="(image, idx) in banners"
        :key="idx"
      >
        <img v-lazy="image.imageUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐歌单 -->
    <div class="reco_tl">推荐歌单</div>
    <song-sheet :reco_songs="reco_songs"></song-sheet>
    <!-- 最新音乐 -->
    <div class="reco_tl">最新音乐</div>
    <div class="new_songs">
      <!-- 将 id_list (id 集合) 与 歌曲 idx (下标) 存至 vuex，方便后续的上下首切换 -->
      <song-list
        v-for="(song, idx) in new_songs"
        :key="song.id"
        :name="song.name"
        :singer="song.song.artists"
        :id="song.id"
        :duration="song.song.duration"
        :id_list="id_list"
        :idx="idx"
      ></song-list>
    </div>
  </div>
</template>

<script>
import { get_banner, get_personalized, get_newsong } from "@/api/recommend.js";
import SongSheet from "@/components/recommend/SongSheet.vue";
import SongList from "@/components/common/SongList.vue";
export default {
  data() {
    return {
      // 轮播图
      banners: [],
      // 推荐歌单
      reco_songs: [],
      // 最新歌单
      new_songs: [],
    };
  },
  components: {
    SongSheet,
    SongList,
  },
  async created() {
    // 获取轮播图数据
    let banner = await get_banner();
    this.banners = banner.data.banners;
    // 获取推荐歌单
    let reco_songs = await get_personalized();
    this.reco_songs = reco_songs.data.result;
    // 获取最新音乐
    let new_songs = await get_newsong();
    this.new_songs = new_songs.data.result;
  },
  computed: {
    // 使用计算属性来筛选出 新歌榜 内所有歌曲的 id 集合
    id_list() {
      return this.new_songs.map((el) => el.id);
    },
  },
};
</script>

<style lang="scss" scope>
.test {
  height: 37vw;
  overflow: hidden;
}
img {
  width: 100%;
}
.reco_box {
  .reco_tl {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    &::after {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: "";
      display: block;
      width: 2px;
      height: 18px;
      background-color: #d43c33;
    }
  }
  .new_songs {
    width: 100%;
    padding-left: 10px;
  }
}
</style>
